// useState 同步异步更新问题？


import React, {useState} from 'react'

const Home = () => {

  console.log('组件渲染了')

  const [count, setCount] = useState(() => {
    console.log('hello')
    return 0;
  });

  const add = () => {
    setTimeout(() => {
      setCount(count => count + 1)
    }, 1000)
  }

  const add10 = () => {
    setCount(count + 10);
  }

  const substract = () => {
    // setCount(count - 1)
    // setCount(count - 1)

    // setTimeout(() => {
    //   setCount(count - 1)
    // })

    // setTimeout(() => {
    //   setCount(count - 1)
    // })

    setCount(count)
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={add}>+1</button>
      <button onClick={add10}>+10</button>
      <hr />
      <button onClick={substract}>-1</button>
    </div>
  )  
}

export default Home;